<template>
<div class="like">
    <div class="like-top">
        <img src="../../../assets/img/xin.png" alt="">
        猜你喜欢
    </div>
    <ul>
    
         <li class="like-item border-bottom" v-for='item in likelist' :key="item.id"
         @click="toDetails"
         >
            <div>
                <img :src="item.imgurl" alt="??">
            </div>
            <div class="like-text" >
                <div class="like-text-title">{{item.title}}</div>
                <div class="like-text-talk">{{item.title}}</div>
                <div class="like-text-name"> 
                    <span class="like-price">￥{{item.price}}</span>起
                    <span  class="like-text-right">{{item.name}}</span>
                </div>
            </div>
        </li>

    </ul>

</div>
    
</template>
<style scoped>
.like{
    background: #fff;
    margin-top: .2rem;

}
.like-top{
    font-size: .28rem;
    line-height: .3rem;
    padding: .2rem 0;
    color: #212121;

}
.like-top img{
    
    width: .3rem;
    height: .3rem;
}
.like-item{
   position: relative;
   height: 2rem;
  
   padding: .2rem 0;

}
.like-item img{
    width: 2rem;
    height: 2rem;
    float: left;
}
.like-text{
    float: left;
    
    height:1.3rem;
    width:4rem;
    padding: .28rem .3rem;
    
}
.like-text-title{
    font-size: .35rem;
    color: #212121;
    
}
.like-text-talk{
    font-size: .22rem;
    margin-top: .2rem;
}
.like-text-name{
    position: relative;
    margin-top: .2rem;
    font-size: .22rem;
}
.like-price{
    color:#ff8300 ;
    font-size: .32rem;
}
.like-text-right{
    position: absolute;
    right: 0;

}
</style>
<script>
export default{
    props:['likelist'],
    data(){
        return{
           
        }
    },
    methods:{
        toDetails(){
            this.$router.push('/detail')
        }
    }
}

</script>
